<template>
  <div class="home-container grzx">
    <navbar :showHeaderIcon="true" />
    <div class="container">
      <div class="page-card top-tabs">
        <el-tabs v-model="pageType">
          <el-tab-pane label="个人信息" name="1"></el-tab-pane>
          <el-tab-pane label="账号安全" name="2"></el-tab-pane>
        </el-tabs>
      </div>

      <div class="page-card m-top" v-if="pageType == '1'">
        <h3>个人信息</h3>
        <div style="width: 500px">
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="所属学校：">
              <el-input
                :value="$store.state.user.user.dept.deptName"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="用户ID：">
              <el-input :value="$store.state.user.id" disabled></el-input>
            </el-form-item>
          </el-form>

          <el-button style="margin-left: 100px" @click="$router.back()"
            >返回</el-button
          >
        </div>
      </div>

      <div class="page-card m-top" v-if="pageType == '2'">
        <h3>账号安全</h3>
        <div style="width: 500px">
          <el-form
            style="position: relative"
            ref="form"
            :model="form"
            label-width="100px"
          >
            <el-form-item label="账号信息：">
              <el-input
                :value="
                  '最后登录时间：' + parseTime($store.state.user.user.loginDate)
                "
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="账号：">
              <el-input
                :value="$store.state.user.user.userName"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="密码：">
              <el-input value="*********" type="password" disabled></el-input>
            </el-form-item>

            <el-link type="primary" class="xgmm" @click="xgmm"
              >修改密码</el-link
            >
          </el-form>
          <el-button style="margin-left: 100px" @click="$router.back()"
            >返回</el-button
          >
        </div>
      </div>
    </div>

    <el-dialog title="修改密码" width="450px" :visible.sync="dialogFormVisible">
      <el-form
        ref="passwordForm"
        :model="passwordForm"
        :rules="rules"
        label-width="auto"
      >
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input
            type="password"
            v-model="passwordForm.oldPassword"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            type="password"
            v-model="passwordForm.newPassword"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            type="password"
            v-model="passwordForm.confirmPassword"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Navbar } from "@/layout/components";
import { parseTime } from "@/utils/exam";
import { updateUserPwd } from "@/api/system/user";
export default {
  components: {
    Navbar,
  },
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.passwordForm.newPassword !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      pageType: "1",
      form: {},
      parseTime: parseTime,

      dialogFormVisible: false,
      passwordForm: {
        oldPassword: undefined,
        newPassword: undefined,
        confirmPassword: undefined,
      },
      // 表单校验
      rules: {
        oldPassword: [
          { required: true, message: "旧密码不能为空", trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "长度在 6 到 20 个字符",
            trigger: "blur",
          },
          {
            pattern: /^[^<>"'|\\]+$/,
            message: "不能包含非法字符：< > \" ' \\ |",
            trigger: "blur",
          },
        ],
        confirmPassword: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { required: true, validator: equalToPassword, trigger: "blur" },
        ],
      },
    };
  },
  created() {},

  methods: {
    xgmm() {
      this.passwordForm = {
        oldPassword: undefined,
        newPassword: undefined,
        confirmPassword: undefined,
      };
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs.passwordForm.clearValidate();
      });
    },
    submit() {
      this.$refs["passwordForm"].validate((valid) => {
        if (valid) {
          updateUserPwd(
            this.passwordForm.oldPassword,
            this.passwordForm.newPassword
          ).then((response) => {
            this.$modal.msgSuccess("修改成功");
            this.dialogFormVisible = false;
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 1200px;
  margin: 20px auto;
  h3 {
    margin-top: 0;
  }
  .xgmm {
    position: absolute;
    right: -70px;
    bottom: 13px;
  }
}
</style>

<style lang="scss">
.grzx {
  .el-input,
  .el-input__inner {
    height: 40px;
  }
}
</style>